<script setup lang="ts">
import { reactive } from "vue";
import { Message } from "@arco-design/web-vue";
import { utils, writeFile } from "xlsx";

const columns = [
  {
    title: "Name",
    dataIndex: "name",
  },
  {
    title: "Salary",
    dataIndex: "salary",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
  {
    title: "Email",
    dataIndex: "email",
  },
];
const data = reactive([
  {
    key: "1",
    name: "Jane Doe",
    salary: 23000,
    address: "32 Park Road, London",
    email: "jane.doe@example.com",
  },
  {
    key: "2",
    name: "Alisa Ross",
    salary: 25000,
    address: "35 Park Road, London",
    email: "alisa.ross@example.com",
  },
  {
    key: "3",
    name: "Kevin Sandra",
    salary: 22000,
    address: "31 Park Road, London",
    email: "kevin.sandra@example.com",
  },
  {
    key: "4",
    name: "Ed Hellen",
    salary: 17000,
    address: "42 Park Road, London",
    email: "ed.hellen@example.com",
  },
  {
    key: "5",
    name: "William Smith",
    salary: 27000,
    address: "62 Park Road, London",
    email: "william.smith@example.com",
  },
]);

const handleClick = () => {
  Message.info("This is an info message");

  // 测试使用xlsx 准备数据
  const data = [
    { 姓名: "张三", 年龄: 25 },
    { 姓名: "李四", 年龄: 30 },
  ];

  // 创建工作表
  const worksheet = utils.json_to_sheet(data);
  const workbook = utils.book_new();
  utils.book_append_sheet(workbook, worksheet, "Sheet1");

  // 导出文件（浏览器）
  writeFile(workbook, "导出数据.xlsx");
};
</script>

<template>
  <span>点击下载模板</span>
  <a-button type="primary" @click="handleClick"> 下载 </a-button>

  <a-divider />
  <div>
    <a-table :columns="columns" :data="data" />
  </div>
</template>

<style lang="scss" scoped></style>
